<template>
  <div class="layout-demo">
    <a-layout>
      <a-layout-header>
        <div>
          <deskHeader />
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider>
          <deskMenu />
        </a-layout-sider>
        <a-layout-content>
          <deskCrumbs />
          <router-view class="layout-demo-commmit" />
        </a-layout-content>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </div>
</template>
<script lang="ts">
import deskMenu from '@com/deskMenu/deskMenu.vue';
import deskCrumbs from '@com/deskCrumbs/deskCrumbs.vue';
import deskHeader from '@com/deskHeader/deskHeader.vue';
export default {
  components: {
    deskMenu,
    deskCrumbs,
    deskHeader,
  },
};
</script>
<style scoped>
.layout-demo {
  width: 100%;
  height: 100%;
}
.layout-demo :deep(.arco-layout) {
  width: 100%;
  height: 100%;
}
.layout-demo :deep(.arco-layout-sider) {
  height: 100% !important;
}
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer) {
  height: 64px;
  /* background-color: var(--color-primary-light-4); */
}

.layout-demo :deep(.arco-layout-sider) {
  width: 206px;
  /* background-color: var(--color-primary-light-3); */
  min-width: 150px;
  max-width: 500px;
  height: 200px;
}

.layout-demo :deep(.arco-layout-content) {
  background-color: var(--boomGn-bg-pkl);
  height: 100%;
  width: 100%;
}
.layout-demo :deep(.arco-layout-content) {
  display: inline-block;
  padding: 10px 16px;
}
.layout-demo-commmit {
  height: calc(100% - 60px);
}
</style>
